<template>
  <div id="stock">
    <div class="hander">
      <div
        class="back"
        @click="
          $router.push({
            path: '/home', //跳转的路径
          })
        "
      >
        <img src="@/assets/common/chevron-left.png" alt="" />
      </div>
      <div class="title">采购入库</div>
      <div class="search">
        <img src="@/assets/common/search.png" alt="" />
      </div>
    </div>
    <div class="choose">
      <div class="title" :style="{ left: titlePosition }">
        <div
          @click="chooseTitle(index)"
          :class="chooseIndex == index ? 'f4' : ''"
          v-for="(item, index) in title"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="content">
      <div class="left_list">
        <div
          class="item"
          :class="listIndex == index ? 'listStyle' : ''"
          v-for="(item, index) in left_list"
          :key="index"
          @click="listIndex = index"
        >
          <img src="" alt="" />
          <div>{{ item.name }}</div>
        </div>
      </div>
      <div class="right_list">
        <div class="list_item">
          <div class="listStyle">全部</div>
          <div>价格</div>
          <div>销量↑</div>
          <div>库存量</div>
        </div>
        <div class="goods">
          <div v-for="(item, index) in goods" :key="index" class="item">
            <img src="" alt="" />
            <div class="goodsInfo">
              <div class="name"></div>
              <div class="change"></div>
              <div class="price">￥199 <span>库存123/2</span></div>
            </div>
            <div class="num">
              <div class="jian"></div>
              <div class="jia"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="shopping_cart">
      <div class="left">
        <div class="cart_icon">
          <img src="@/assets/stock/shop_cart1.png" alt="" />
        </div>
        <div class="price">
          <div>￥456985</div>
          <div>您已满足进货</div>
        </div>
      </div>
      <div class="right">确定</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chooseIndex: 0,
      listIndex: 0,
      titlePosition: "",
      title: [
        "来米",
        "柚子",
        "雪加",
        "狼烟天下",
        "心悦",
        "柚子",
        "心悦",
        "柚子",
        "心悦",
        "柚子",
      ],
      goods: [{}, {}],
      left_list: [
        {
          name: "活动惊喜",
          icon: "",
        },
        {
          name: "一杆一弹",
          icon: "",
        },
        {
          name: "雾化烟弹",
          icon: "",
        },
        {
          name: "雾化烟杆",
          icon: "",
        },
        {
          name: "胶皮套",
          icon: "",
        },
        {
          name: "周边产品",
          icon: "",
        },
      ],
    };
  },
  created() {},
  methods: {
    chooseTitle(index) {
      this.chooseIndex = index;
      if (index > 2) {
        this.titlePosition = (2 - index) * 20 + "vw";
      }
    },
  },
};
</script>

<style lang="less" scoped>
#stock {
  background: #0078e8;
  width: 100vw;
  .hander {
    width: 100vw;
    height: 15vw;
    padding: 0 2vw;
    box-sizing: border-box;
    font-size: 5vw;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 7vw;
    }
  }
  .choose {
    width: 100vw;
    height: 15vw;
    overflow: hidden;
    position: relative;
    .title {
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      div {
        width: 20vw;
        line-height: 10vw;
        text-align: center;
        color: #fff;
        font-size: 4vw;
      }
    }
  }
  .content {
    width: 100vw;
    height: calc(100vh - 30vw);
    background: #f2f8ff;
    border-radius: 5vw 5vw 0 0;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
  }
  .goods {
    width: 100%;
    height: calc(100% - 13vw);
    margin-top: 3vw;
    box-sizing: border-box;
    padding: 0 5vw;
    overflow-y: scroll;
    .item {
      width: 100%;
      height: 30vw;
      background: #eee;
      margin-bottom: 5vw;
    }
    .item:last-child {
      margin-bottom: 25vw;
    }
  }
  .left_list {
    width: 22vw;
    height: 100%;
    background: #fff;
    box-shadow: 0px 0px 20px #eee;
    padding-bottom: 20vw;
    overflow-y: scroll;
    .item {
      width: 100%;
      border-left: 1vw solid #fff;
      box-sizing: border-box;
      text-align: center;
      font-size: 4vw;
      color: #fff;
      padding: 3vw 0;
      color: #666;
      line-height: 8vw;
      img {
        width: 8vw;
        height: 8vw;
        background: #fff;
      }
    }
    .item:last-child {
      margin-bottom: 25vw;
    }
    .listStyle {
      border-left: 1vw solid #0078e8;
      color: #0078e8;
      background: #f2f8ff;
    }
  }
  .right_list {
    width: 78vw;
    padding-top: 3vw;
    .list_item {
      width: 100%;
      height: 10vw;
      padding: 0 2vw;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        width: 22%;
        line-height: 8vw;
        background: #eee;
        font-size: 3.5vw;
        text-align: center;
        border-radius: 4vw;
      }
      .listStyle {
        background: #0078e8;
        color: #fff;
      }
    }
  }
  .shopping_cart {
    position: fixed;
    bottom: 5vw;
    left: 5vw;
    width: 90vw;
    height: 16vw;
    background: #0078e8;
    border-radius: 8vw;
    padding: 2vw;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      margin: 1vw;
      .cart_icon {
        width: 10vw;
        height: 10vw;
        background: #fff;
        border-radius: 50%;
        position: relative;
        img {
          widows: 6vw;
          height: 6vw;
          margin: 2vw;
        }
        .num {
          position: absolute;
          top: 0;
          right: 6vw;
          background: #0078e8;
        }
      }
      .price {
        text-align: center;
        font-size: 3vw;
        padding-left: 5vw;
        :first-child {
          font-size: 5vw;
        }
      }
    }
    .right {
      width: 25vw;
      height: 100%;
      background: #fff;
      border-radius: 6vw;
      text-align: center;
      line-height: 12vw;
      font-size: 4vw;
      color: #0078e8;
      font-weight: bold;
    }
  }
}
.f4 {
  font-size: 4.5vw !important;
  font-weight: bold;
}
</style>
